<template>
    <view class="content">
        <a-demo title="基础使用">
            <pure-form :form="form" :rules="rules" ref="formRef" class="pure-field-text-align-right">
                <!-- 姓名 - 字符串类型 -->
                <pure-field prop="name" label="姓名" class="pure-field-border-bottom">
                    <pure-input v-model="form.name" placeholder="请输入姓名"></pure-input>
                </pure-field>

                <!-- 年龄 - 数字类型 -->
                <pure-field prop="age" label="年龄" class="pure-field-border-bottom">
                    <pure-input v-model="form.age" placeholder="请输入年龄" type="number"></pure-input>
                </pure-field>

                <!-- 性别 - 单选类型 -->
                <pure-field prop="gender" label="性别" class="pure-field-border-bottom">
                    <pure-radio-group v-model="form.gender" class="pure-radio-items-end">
                        <pure-radio label="男" value="1"></pure-radio>
                        <pure-radio label="女" value="0"></pure-radio>
                    </pure-radio-group>
                </pure-field>

                <!-- 邮箱 - 邮箱类型 -->
                <pure-field prop="email" label="邮箱" class="pure-field-border-bottom">
                    <pure-input v-model="form.email" placeholder="请输入邮箱"></pure-input>
                </pure-field>

                <!-- 手机号 - 自定义验证函数 -->
                <pure-field prop="phone" label="手机号" class="pure-field-border-bottom">
                    <pure-input v-model="form.phone" placeholder="请输入手机号" type="tel"></pure-input>
                </pure-field>

                <!-- 地址 - 弹窗类型 -->
                <pure-field prop="address" label="地址" readonly rightIcon="__you2" @onClick="handleAddressFieldClick" class="pure-field-border-bottom">
                    <pure-input v-model="form.address" placeholder="请输入地址"></pure-input>
                </pure-field>

                <!-- 爱好 - 多选类型 -->
                <pure-field prop="hobby" label="爱好" rightIcon="__you2" class="pure-field-border-bottom">
                    <pure-checkbox-group v-model="form.hobby" class="pure-checkbox-items-end">
                        <pure-checkbox v-for="cbx in hobbiesOptions" :key="cbx.label" :value="cbx.value" :label="cbx.label"></pure-checkbox>
                    </pure-checkbox-group>
                </pure-field>

                <!-- 日历 -->
                <pure-field prop="birthday" label="生日" readonly rightIcon="__you2" class="pure-field-border-bottom" @onClick="handleBirthdayFieldClick">
                    <pure-input v-model="form.birthday" placeholder="请选择生日"></pure-input>
                </pure-field>

                <!-- 开关选择器 -->
                <pure-field prop="display" label="展示资料">
                    <pure-switch v-model="form.display"></pure-switch>
                </pure-field>

                <!-- 步进器 -->
                <pure-field prop="classroom" label="班级">
                    <pure-stepper v-model="form.classroom"></pure-stepper>
                    <text class="after-text">班</text>
                </pure-field>
            </pure-form>
            <view class="buttons">
                <pure-button text="重置" class="pure-button-block pure-button-info" @onClick="handleReset"></pure-button>
                <pure-button text="提交" @onClick="handleSubmit" class="pure-button-block pure-button-primary"></pure-button>
            </view>
        </a-demo>

        <!-- 地址选择弹窗 -->
        <pure-cascader :show="isShowAddressPicker" :options="region" title="请选择地址" @confirm="handleAddressPickerConfirm" @close="isShowAddressPicker = false"></pure-cascader>

        <!-- 出生日期选择弹窗 -->
        <pure-calendar switch-mode="year-month" :show="isShowBirthdayPicker" @close="isShowBirthdayPicker = false" @confirm="handleBirthdayPickerConfirm"></pure-calendar>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // ref
    const formRef = ref(null);

    // 表单数据
    const form = ref({
        name: "",
        age: null,
        gender: "",
        email: "",
        phone: "",
        address: "",
        hobby: [],
        display: false,
        birthday: "",
        classroom: 10,
    });

    // 表单规则
    const rules = ref({
        name: [
            { required: true, message: "请输入姓名", trigger: "blur" },
            { min: 2, max: 10, message: "姓名长度在 2 到 10 个字符" },
        ],
        age: [
            { type: "number", required: true, message: "请输入年龄", trigger: "blur" },
            { type: "number", message: "年龄必须为数字" },
            { type: "number", min: 0, max: 120, message: "年龄范围在 0 到 120 岁" },
        ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
        email: [
            { required: true, message: "请输入邮箱", trigger: "blur" },
            { type: "email", message: "邮箱格式不正确" },
        ],
        phone: [
            { required: true, message: "请输入手机号" },
            {
                type: "string",
                trigger: "blur",
                validator: (rule, value, callback) => {
                    if (value.length !== 11) {
                        callback(new Error("手机号长度必须为 11 位"));
                        return;
                    }
                    if (!/^1[3-9]\d{9}$/.test(value)) {
                        callback(new Error("手机号格式不正确"));
                        return;
                    }
                    callback();
                },
            },
        ],
        address: [
            { required: true, message: "请输入地址", trigger: "change" },
            { min: 2, max: 100, message: "地址长度在 2 到 100 个字符" },
        ],
        hobby: [
            { type: "array", required: true, message: "请选择爱好", trigger: "change" },
            { type: "array", min: 1, max: 3, message: "爱好数量在 1 到 3 个" },
        ],
        display: [{ type: "boolean", message: "请选择是否展示资料", trigger: "change" }],
        birthday: [
            {
                type: "string",
                required: true,
                message: "请选择生日",
                trigger: "change",
            },
        ],
        classroom: [
            { type: "number", required: true, message: "请选择班级", trigger: "change" },
            {
                type: "number",
                trigger: "change",
                validator: (rule, value, callback) => {
                    if (value <= 0) {
                        callback(new Error("班级需大于0"));
                        return;
                    }
                    if (value > 12) {
                        callback(new Error("班级需小于12"));
                        return;
                    }
                    callback();
                },
            },
        ],
    });

    // 重置表单
    function handleReset() {
        form.value = formRef.value.reset();
    }

    // 提交表单
    function handleSubmit() {
        // 验证一个字段
        // 第一个参数为字段名，第二个参数为回调函数
        // errors: 错误信息，为 undefined 时表示验证通过。
        // fields: 验证失败的字段。
        // formRef.value.validateField("name", (errors, fields) => {
        // 	if (!errors) {
        // 		console.log("姓名验证通过");
        // 	} else {
        // 		console.log("表单验证失败", errors, fields);
        // 	}
        // });

        // 验证多个字段
        // 第一个参数为字段名，第二个参数为回调函数
        // errors: 错误信息，为 undefined 时表示验证通过。
        // fields: 验证失败的字段。
        // formRef.value.validateField(["name", "age"], (errors, fields) => {
        // 	if (!errors) {
        // 		console.log("姓名和年龄验证通过");
        // 	} else {
        // 		console.log("表单验证失败", errors, fields);
        // 	}
        // });

        // 验证整个表单
        // errors: 错误信息，为 undefined 时表示验证通过。
        // fields: 验证失败的字段。
        formRef.value.validate((errors, fields) => {
            if (!errors) {
                console.log("表单验证通过");
            } else {
                console.log("表单验证失败", errors, fields);
            }
        });
    }

    // 模拟地址数据
    const region = [
        {
            label: "北京市",
            value: "110000",
            code: "110000",
            children: [
                { label: "东城区", value: "110101", code: "110101" },
                { label: "西城区", value: "110102", code: "110102" },
                { label: "朝阳区", value: "110105", code: "110105" },
                { label: "丰台区", value: "110106", code: "110106" },
                { label: "石景山区", value: "110107", code: "110107" },
                { label: "海淀区", value: "110108", code: "110108" },
                { label: "门头沟区", value: "110109", code: "110109" },
                { label: "房山区", value: "110111", code: "110111" },
                { label: "通州区", value: "110112", code: "110112" },
                { label: "顺义区", value: "110113", code: "110113" },
                { label: "昌平区", value: "110114", code: "110114" },
                { label: "大兴区", value: "110115", code: "110115" },
                { label: "怀柔区", value: "110116", code: "110116" },
                { label: "平谷区", value: "110117", code: "110117" },
                { label: "密云区", value: "110118", code: "110118" },
                { label: "延庆区", value: "110119", code: "110119" },
                { label: "经济技术开发区", value: "110110", code: "110110" },
            ],
        },
        {
            label: "山东省",
            value: "370000",
            code: "370000",
            children: [
                {
                    label: "济南市",
                    value: "370100",
                    code: "370100",
                    children: [
                        { label: "历下区", value: "370102", code: "370102" },
                        { label: "市中区", value: "370103", code: "370103" },
                        { label: "槐荫区", value: "370104", code: "370104" },
                        { label: "天桥区", value: "370105", code: "370105" },
                        { label: "历城区", value: "370112", code: "370112" },
                        { label: "长清区", value: "370113", code: "370113" },
                        { label: "章丘区", value: "370114", code: "370114" },
                        { label: "济阳区", value: "370115", code: "370115" },
                        { label: "莱芜区", value: "370116", code: "370116" },
                        { label: "钢城区", value: "370117", code: "370117" },
                        { label: "平阴县", value: "370124", code: "370124" },
                        { label: "商河县", value: "370126", code: "370126" },
                    ],
                },
                {
                    label: "青岛市",
                    value: "370200",
                    code: "370200",
                    children: [
                        { label: "市南区", value: "370202", code: "370202" },
                        { label: "市北区", value: "370203", code: "370203" },
                        { label: "李沧区", value: "370213", code: "370213" },
                        { label: "城阳区", value: "370214", code: "370214" },
                        { label: "崂山区", value: "370212", code: "370212" },
                        { label: "黄岛区", value: "370211", code: "370211" },
                        { label: "即墨区", value: "370215", code: "370215" },
                        { label: "胶州市", value: "370281", code: "370281" },
                        { label: "平度市", value: "370283", code: "370283" },
                        { label: "莱西市", value: "370285", code: "370285" },
                    ],
                },
                {
                    label: "淄博市",
                    value: "370300",
                    code: "370300",
                    children: [
                        { label: "张店区", value: "370303", code: "370303" },
                        { label: "淄川区", value: "370302", code: "370302" },
                        { label: "周村区", value: "370306", code: "370306" },
                        { label: "博山区", value: "370304", code: "370304" },
                        { label: "临淄区", value: "370305", code: "370305" },
                        { label: "桓台县", value: "370321", code: "370321" },
                        { label: "高青县", value: "370322", code: "370322" },
                        { label: "沂源县", value: "370323", code: "370323" },
                    ],
                },
                {
                    label: "枣庄市",
                    value: "370400",
                    code: "370400",
                    children: [
                        { label: "薛城区", value: "370403", code: "370403" },
                        { label: "市中区", value: "370402", code: "370402" },
                        { label: "峄城区", value: "370404", code: "370404" },
                        { label: "山亭区", value: "370406", code: "370406" },
                        { label: "台儿庄区", value: "370405", code: "370405" },
                        { label: "滕州市", value: "370481", code: "370481" },
                    ],
                },
                {
                    label: "东营市",
                    value: "370500",
                    code: "370500",
                    children: [
                        { label: "东营区", value: "370502", code: "370502" },
                        { label: "河口区", value: "370503", code: "370503" },
                        { label: "垦利区", value: "370505", code: "370505" },
                        { label: "广饶县", value: "370523", code: "370523" },
                        { label: "利津县", value: "370522", code: "370522" },
                    ],
                },
                {
                    label: "烟台市",
                    value: "370600",
                    code: "370600",
                    children: [
                        { label: "莱山区", value: "370613", code: "370613" },
                        { label: "芝罘区", value: "370602", code: "370602" },
                        { label: "福山区", value: "370611", code: "370611" },
                        { label: "牟平区", value: "370612", code: "370612" },
                        { label: "龙口市", value: "370681", code: "370681" },
                        { label: "莱阳市", value: "370682", code: "370682" },
                        { label: "莱州市", value: "370683", code: "370683" },
                        { label: "蓬莱市", value: "370684", code: "370684" },
                        { label: "招远市", value: "370685", code: "370685" },
                        { label: "栖霞市", value: "370686", code: "370686" },
                        { label: "海阳市", value: "370687", code: "370687" },
                        { label: "长岛县", value: "370634", code: "370634" },
                    ],
                },
                {
                    label: "潍坊市",
                    value: "370700",
                    code: "370700",
                    children: [
                        { label: "奎文区", value: "370705", code: "370705" },
                        { label: "潍城区", value: "370702", code: "370702" },
                        { label: "寒亭区", value: "370703", code: "370703" },
                        { label: "坊子区", value: "370704", code: "370704" },
                        { label: "诸城市", value: "370782", code: "370782" },
                        { label: "青州市", value: "370781", code: "370781" },
                        { label: "寿光市", value: "370783", code: "370783" },
                        { label: "安丘市", value: "370784", code: "370784" },
                        { label: "昌邑市", value: "370786", code: "370786" },
                        { label: "高密市", value: "370785", code: "370785" },
                        { label: "临朐县", value: "370724", code: "370724" },
                        { label: "昌乐县", value: "370725", code: "370725" },
                    ],
                },
                {
                    label: "济宁市",
                    value: "370800",
                    code: "370800",
                    children: [
                        { label: "任城区", value: "370811", code: "370811" },
                        { label: "兖州区", value: "370812", code: "370812" },
                        { label: "邹城市", value: "370883", code: "370883" },
                        { label: "曲阜市", value: "370881", code: "370881" },
                        { label: "嘉祥县", value: "370829", code: "370829" },
                        { label: "汶上县", value: "370830", code: "370830" },
                        { label: "梁山县", value: "370832", code: "370832" },
                        { label: "微山县", value: "370826", code: "370826" },
                        { label: "鱼台县", value: "370827", code: "370827" },
                        { label: "金乡县", value: "370828", code: "370828" },
                        { label: "泗水县", value: "370831", code: "370831" },
                    ],
                },
                {
                    label: "泰安市",
                    value: "370900",
                    code: "370900",
                    children: [
                        { label: "泰山区", value: "370902", code: "370902" },
                        { label: "岱岳区", value: "370911", code: "370911" },
                        { label: "新泰市", value: "370982", code: "370982" },
                        { label: "肥城市", value: "370983", code: "370983" },
                        { label: "宁阳县", value: "370921", code: "370921" },
                        { label: "东平县", value: "370923", code: "370923" },
                    ],
                },
                {
                    label: "威海市",
                    value: "371000",
                    code: "371000",
                    children: [
                        { label: "环翠区", value: "371002", code: "371002" },
                        { label: "文登区", value: "371003", code: "371003" },
                        { label: "荣成市", value: "371082", code: "371082" },
                        { label: "乳山市", value: "371083", code: "371083" },
                    ],
                },
                {
                    label: "日照市",
                    value: "371100",
                    code: "371100",
                    children: [
                        { label: "东港区", value: "371102", code: "371102" },
                        { label: "岚山区", value: "371103", code: "371103" },
                        { label: "五莲县", value: "371121", code: "371121" },
                        { label: "莒县", value: "371122", code: "371122" },
                    ],
                },
                {
                    label: "滨州市",
                    value: "371600",
                    code: "371600",
                    children: [
                        { label: "滨城区", value: "371602", code: "371602" },
                        { label: "沾化区", value: "371603", code: "371603" },
                        { label: "惠民县", value: "371621", code: "371621" },
                        { label: "博兴县", value: "371625", code: "371625" },
                        { label: "阳信县", value: "371622", code: "371622" },
                        { label: "无棣县", value: "371623", code: "371623" },
                    ],
                },
                {
                    label: "德州市",
                    value: "371400",
                    code: "371400",
                    children: [
                        { label: "德城区", value: "371402", code: "371402" },
                        { label: "陵城区", value: "371403", code: "371403" },
                        { label: "乐陵市", value: "371481", code: "371481" },
                        { label: "禹城市", value: "371482", code: "371482" },
                        { label: "临邑县", value: "371424", code: "371424" },
                        { label: "平原县", value: "371426", code: "371426" },
                        { label: "夏津县", value: "371427", code: "371427" },
                        { label: "武城县", value: "371428", code: "371428" },
                        { label: "庆云县", value: "371423", code: "371423" },
                        { label: "宁津县", value: "371422", code: "371422" },
                        { label: "齐河县", value: "371425", code: "371425" },
                    ],
                },
                {
                    label: "聊城市",
                    value: "371500",
                    code: "371500",
                    children: [
                        { label: "东昌府区", value: "371502", code: "371502" },
                        { label: "临清市", value: "371581", code: "371581" },
                        { label: "茌平县", value: "371523", code: "371523" },
                        { label: "东阿县", value: "371524", code: "371524" },
                        { label: "高唐县", value: "371526", code: "371526" },
                        { label: "阳谷县", value: "371521", code: "371521" },
                        { label: "冠县", value: "371525", code: "371525" },
                        { label: "莘县", value: "371522", code: "371522" },
                    ],
                },
                {
                    label: "临沂市",
                    value: "371300",
                    code: "371300",
                    children: [
                        { label: "兰山区", value: "371302", code: "371302" },
                        { label: "河东区", value: "371312", code: "371312" },
                        { label: "罗庄区", value: "371311", code: "371311" },
                        { label: "兰陵县", value: "371324", code: "371324" },
                        { label: "郯城县", value: "371322", code: "371322" },
                        { label: "莒南县", value: "371327", code: "371327" },
                        { label: "沂水县", value: "371323", code: "371323" },
                        { label: "蒙阴县", value: "371328", code: "371328" },
                        { label: "平邑县", value: "371326", code: "371326" },
                        { label: "沂南县", value: "371321", code: "371321" },
                        { label: "临沭县", value: "371329", code: "371329" },
                        { label: "费县", value: "371325", code: "371325" },
                    ],
                },
                {
                    label: "菏泽市",
                    value: "371700",
                    code: "371700",
                    children: [
                        { label: "牡丹区", value: "371702", code: "371702" },
                        { label: "定陶区", value: "371703", code: "371703" },
                        { label: "曹县", value: "371721", code: "371721" },
                        { label: "单县", value: "371722", code: "371722" },
                        { label: "巨野县", value: "371724", code: "371724" },
                        { label: "成武县", value: "371723", code: "371723" },
                        { label: "郓城县", value: "371725", code: "371725" },
                        { label: "鄄城县", value: "371726", code: "371726" },
                        { label: "东明县", value: "371728", code: "371728" },
                    ],
                },
            ],
        },
    ];

    // 选择地址弹窗显示状态
    const isShowAddressPicker = ref(false);

    // 点击选择地址
    function handleAddressFieldClick() {
        isShowAddressPicker.value = true;
    }

    // 确认选择地址
    function handleAddressPickerConfirm(indexes, datas) {
        form.value.address = datas.map((item) => item.label).join(" / ");
        isShowAddressPicker.value = false;
    }

    // 爱好可选项
    const hobbiesOptions = [
        { label: "运动", value: "运动" },
        { label: "读书", value: "读书" },
        { label: "旅游", value: "旅游" },
        { label: "音乐", value: "音乐" },
        { label: "游戏", value: "游戏" },
        { label: "美食", value: "美食" },
    ];

    // 出生日期弹窗显示状态
    const isShowBirthdayPicker = ref(false);

    // 点击选择出生日期
    function handleBirthdayFieldClick() {
        isShowBirthdayPicker.value = true;
    }

    // 确认选择出生日期
    function handleBirthdayPickerConfirm(dates) {
        const date = dates[0];
        form.value.birthday = `${date.year}/${date.month}/${date.day}`;
        isShowBirthdayPicker.value = false;
    }
</script>

<style scoped>
    .content {
        --pure-field-label-width: 80px;
        --pure-field-label-color: var(--pure-text-color-regular);
    }

    .buttons {
        display: flex;
        flex-direction: row;
        gap: 20px;
        margin: 20px 0;
        box-sizing: border-box;
    }

    .after-text {
        display: inline-flex;
        margin-left: 5px;
    }
</style>
